<template>
  <div class="ScholarResult">
    <div>
      <homePage></homePage>
    </div>
    <el-row type="flex" justify="center">
        <el-col class="TitleBox" :span="14">
            <el-row type="flex" justify="center">
                <span class="Title">学者查询</span>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col align="middle" class="SearchBox" :span="20">
                    <el-col class="SearchLabel" :span="2.1">
                        <span class="Red">*</span>
                        <span>姓名&nbsp;</span>
                        <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col class="SearchInput" :span="20">
                        <el-input @keyup.enter.native="Search" v-model="searchForm.name" placeholder="请输入姓名（必填）"></el-input>
                    </el-col>
                    <!-- <el-col class="SearchLabel" :span="2">
                        <span>机构&nbsp;</span>
                        <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col class="SearchInput" :span="12">
                        <el-input v-model="searchForm.region" placeholder="请尽量写详细，如xx大学，xx院系等"></el-input>
                    </el-col> -->
                    <el-col class="SearchButton" :span="1">
                        <el-button icon="el-icon-search" circle @click="Search"></el-button>
                    </el-col>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row type="flex" justify="center">
        <el-col class="ResultTitle" :span="16">
            <span>为您检索到如下结果：</span>
        </el-col>
    </el-row>
    <el-row type="flex" justify="center">
        <el-col class="ResultContent" :span="16">
            <el-row v-if="userList2.length === 0" type="flex" justify="center">
            <el-col class="Sorry" :span="10">抱歉，没有该学者信息</el-col>
            </el-row>
            <el-col v else class="ResultContentBox" v-for="item in userList2" :key=item.id :span="11">
                <el-col align="middle" class="ResultContentAvatar" :span="6">
                    <el-avatar :size=70 :src="circleUrl"></el-avatar>
                </el-col>
                <el-col class="ResultContentWord" :span="12">
                    <el-row class="Result1">
                        <span class="ResultName">{{item.name}}</span>
                        <span class="ResultName" v-if="item.vip">&nbsp;*V*</span>
                    </el-row>
                    <el-row class="Result2">
                        <span class="ResultOrganization">{{item.organization}}</span>
                    </el-row>
                    <el-row class="Result3">
                        <el-col :span="12">
                            <span class="ResultOther">发表文章：{{item.n_pubs}}</span>
                        </el-col>
                        <el-col :span="12">
                            <span class="ResultOther">被引用数：{{item.n_citation}}</span>
                        </el-col>
                    </el-row>
                    <el-row class="Result4">
                        <el-col :span="24">
                            <span class="ResultOther">研究领域：{{item.field}}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col class="toProfile" :span="4">
                    <el-button round @click="toProfile(item.id)">前往查看</el-button>
                </el-col>
            </el-col>
        </el-col>
    </el-row>
    <div class="page_bottom">
      <bottom-info></bottom-info>
    </div>
  </div>
</template>

<script>
import circleUrl from '../assets/scholarProfile/用户头像.png'
import homePage from '../components/homePage.vue'
import bottomInfo from "../components/bottomInfo.vue";

export default {   
     watch: {
        $route: {
        handler: "searchReload",
        }
    },
    components: {
        'bottom-info':bottomInfo, //挂载底部组件
        homePage,
    },
    data() {
        return {
            searchName:'',
            searchRegion:'',
            searchForm: {
                name:'',
                region:'',
            },
            circleUrl: circleUrl,
            userList2: [],
            userList: [
                {
                    id:1,
                    name:'乐乐',
                    organization:'北京航空航天大学',
                    paperCount:1,
                    useCount:2,
                    field:'农业',
                    vip: true,
                },
                {
                    id:2,
                    name:'乐乐',
                    organization:'北京航空航天大学',
                    paperCount:1,
                    useCount:2,
                    field:'农业',
                    vip: false,
                },
                {
                    id:3,
                    name:'乐乐',
                    organization:'北京航空航天大学',
                    paperCount:1,
                    useCount:2,
                    field:'农业',
                    vip: false,
                },
                {
                    id:4,
                    name:'乐乐',
                    organization:'北京航空航天大学',
                    paperCount:1,
                    useCount:2,
                    field:'农业',
                    vip: true,
                },
            ]
        }
    },
    methods: {
        toProfile(userId) {
            this.$router.push("/scholarprofile/" + userId);
        },
        searchReload() {
            location.reload();
        },
        Search() {
            console.log("SEARCH");
            if(this.searchForm.name === "") {
                this.$message.warning("名字不可为空");
                return;
            }
            this.$router.push("/scholarresult" + "/?name=" + this.searchForm.name);
        },
        getScholarSearchInfo() {
            let obj = {
                search: {
                    name: this.searchName,
                    relative_paper_num: 20,
                },
            };

            this.$axios({
                method: "post",
                url: "/api/esQAuthor",
                data: JSON.stringify(obj),
                })
                .then((res) => {
                    console.log(res);
                    this.userList2 = res.data.post.author;

                    for(let i = 0; i < this.userList2.length; i++) {
                        if('tags' in this.userList2[i]) {
                            let max =  0;
                            if(this.userList2[i].tags.length > 0) {
                                for(let j = 0; j < this.userList2[i].tags.length; j++) {
                                    if(this.userList2[i].tags[j].w > max) {
                                        max = this.userList2[i].tags[j].w;
                                        this.userList2[i].field = this.userList2[i].tags[j].t;
                                    }
                                }
                            }
                            else {
                                this.userList2[i].field = "-";
                            }
                        }
                        else {
                            this.userList2[i].field = "-";
                        }
                    }

                    for(let i = 0; i < this.userList2.length; i++) {
                        if(this.userList2[i].field.length > 25)
                            this.userList2[i].field = this.userList2[i].field.slice(0, 24) + "..." ;

                        if(!('n_pubs' in this.userList2[i])) {
                            this.userList2[i].n_pubs = 0;
                        }
                        if(!('n_citation' in this.userList2[i])) {
                            this.userList2[i].n_citation = 0;
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
        }
    },
    mounted() {
        this.searchName = this.$route.query.name;
        console.log(this.searchName);
        this.getScholarSearchInfo();
    }
}
</script>

<style>
.SearchInput .el-input__inner{
    border: none;
}
</style>

<style scoped>
.page_bottom{
  height:110px;
  width:100%;
  margin:auto;
  margin-top: 10px;
}
.Sorry {
    text-align: center;
    margin-top: 15px;
    font-size: 24px;
    color: rgb(202, 202, 202, 0.9);
    /* border: 1px solid black; */
}
.TitleBox {
    /* margin-top: 0px; */
    /* border: 1px solid black; */
    padding: 10px;
}
.Title {
    font-size: 22px;
    font-weight: bold;
}
.SearchBox {
    margin-top: 20px;
    padding-left: 20px;
    border: 1px solid rgb(211, 211, 211);
    border-radius: 5px;
}
.SearchLabel {
    margin-top: 5px;
}
.SearchButton {
    margin-left: 15px;
}
.SearchButton button {
    margin-top: 1px;
    border: none;
}
.SearchButton button:hover {
    background: rgb(245, 235, 255);
    color: rgb(138, 33, 229);
}
.ResultTitle {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.ResultContent {
    /* border: 1px solid black; */
    margin-bottom: 20px;
}
.ResultContentBox {
    /* border: 1px solid black; */
    box-shadow: 0px 0px 5px 1px #d2d2ff;
    border-radius: 10px;
    margin: 10px;
    padding: 10px 5px 15px 0px;
}
.ResultContentWord {
    /* border: 1px solid black; */
    margin-top: 5px;
}
.ResultContentAvatar {
    margin-top: 10px;
}
.ResultName {
    font-size: 21px;
}
.ResultOrganization {
    font-size: 14px;
}
.ResultOther {
    font-size: 13px;
    color: grey;
}
.Result1 {
    margin-top: 5px;
}
.Result2  ,.Result3, .Result4 {
    margin-top: 3px;
}
.toProfile {
    /* border: 1px solid black; */
    margin-top: 30px;
    margin-left: 5px;
}
.toProfile button:hover {
    color:#9a9aff;
    background: #ededff;
    border-color: #b8b8ff;
}
.Red {
    color: red;
}
</style>